<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <style type="text/css">
        *{padding: 0;margin: 0;font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, sans-serif;}
        html{font-size: 50px;}
        html,body,#main{width: 100%;height: 100%;margin: 0;padding: 0;}
        a{color: transparent;tap-highlight-color: rgba(0, 0, 0, 0);-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
        #main{position: relative;overflow: hidden;}
        #main { transform-style: preserve-3d; perspective: 1000px;overflow: hidden;}
        #back { width: 100%;height: 100%;position: absolute;}
        #content { position: relative;z-index: 9;text-align: center;width: 100%;height: 100%;}
        #title { width: 6rem;height: 25%;display: block;margin: 8% auto 0 auto;}
        #action-text { width: 3.5rem;height: 4%;display: block;margin: -10px auto 0 auto;}
        #hammer { width: 2rem;height: 2.2rem;position: absolute; right: 10%; top: -12%;
            -webkit-transform-origin: right bottom;transform-origin: right bottom;
            -webkit-animation: hammer-move2 500ms linear infinite alternate;
            animation: hammer-move2 500ms linear infinite alternate;}
        #eggs-wrap{position: absolute;z-index: 11;width: 100%;height: 60%;bottom: 0;}
        #ground{width: 100%;height: 100%;position: absolute;left: 0;}
        #egg1-div{position: relative;width: 3.5rem;height: 4.6rem;margin: 0% auto 0 auto;}
        #egg-middle{width: 3.5rem;height: 4.6rem;-webkit-transform-origin: center bottom;  transform-origin: center bottom; }
        #egg-floor{width: 3rem;height: .6rem;position:absolute;top: 4.1rem; left: .3rem;}
        #eyes-mouth{position: absolute;width: 2rem;height: 1.7rem;left: 0;top:.7rem;}
        #egg-left{width: 2rem;height: 2.7rem;position: absolute;left: 10%;top:21%;}
        #egg-right{width: 1.6rem;height: 2.2rem;position: absolute;right: 13%;top:22%;}
        #say{position: absolute;width: 2rem;height: 1.3rem;left: 1rem;top:-.8rem; }

        .hammerMove{ -webkit-animation: hammer-move 200ms cubic-bezier(0.6, -0.28, 0.74, 0.05) 3!important;animation: hammer-move 200ms cubic-bezier(0.6, -0.28, 0.74, 0.05) 3!important;}
        .eggMove{-webkit-animation: egg-move 300ms cubic-bezier(0.22, 0.61, 0.36, 1) 2 forwards;animation: egg-move 300ms cubic-bezier(0.22, 0.61, 0.36, 1) 2 forwards;}
        @keyframes hammer-move {
            0%{right: 10%; top: -12%;transform: rotate(5deg);}
            100%{right: 10%; top: -15%;transform: rotate(-23deg);}
        }
        @-webkit-keyframes hammer-move {
            0%{right: 10%; top: -12%;-webkit-transform: rotate(5deg);}
            100%{right: 10%; top: -15%;-webkit-transform: rotate(-23deg);}
        }
        @keyframes hammer-move2 {
            0%{right: 10%; top: -12%;transform: rotate(5deg);}
            100%{right: 10%; top: -15%;transform: rotate(-23deg);}
        }
        @-webkit-keyframes hammer-move2 {
            0%{right: 10%; top: -12%;-webkit-transform: rotate(5deg);}
            100%{right: 10%; top: -15%;-webkit-transform: rotate(-23deg);}
        }
        @keyframes say-move {
            0%{left:1.8rem;transform: scale(1)}
            100%{left:2.5rem;transform: scale(1.2)}
        }
        @-webkit-keyframes say-move {
            0%{left:1.8rem;}
            100%{left:2.5rem;}
        }
        @keyframes egg-move {
            25%{transform: rotate(18deg);}
            50%{transform: rotate(0deg);}
            100%{transform: rotate(-18deg);}

        }
        @-webkit-keyframes egg-move {
            25%{-webkit-transform: rotate(18deg);}
            50%{-webkit-transform: rotate(0deg);}
            100%{-webkit-transform: rotate(-18deg);}
        }
        .display-none{display: none!important;}
        .display-block{display: block!important;}
        .opacity-0{opacity: 0;transition: opacity 300ms ease;}

        #egg-part{position: relative;z-index: 99;top:-12%;}
        #egg-before{width: 5.5rem;height: 6rem;display: none;}
        #egg-after{width: 8.3rem;height: 6rem;display: none;}

        .mask{position: absolute;width: 100%;height:100%;top:100%;top:0;left:0;background: rgba(0,0,0,0.5);z-index: 999;text-align: center;display: none;}
        .close{width: .8rem;height: .8rem;position: absolute;top:.8rem;right: 15px;}
        .result-wrap{position: relative;width: 85%;margin: 20% auto 0 auto;transform: scale(0.5);-webkit-transform: scale(0.5);}
        .result-title{width: 6.3rem;height: 1.2rem;}
        .result-content{color: #a26a32;padding: 30px 10px 15px 15px;background-color: #fff6de;border-radius: 5px;
            margin-top: -.6rem;font-size: .24rem;}
        .result-img{width: 5.4rem;}
        #fail-mask1 .result-img{height: 4.2rem;}
        #fail-mask2 .result-img{height: 5.3rem;}
        #success-mask .result-img:first-child{height: 1.3rem;}
        #success-mask .result-img:last-child{height: 2.5rem;}
        #fail-mask1 .result-btn{width: 4.3rem;height: 1.2rem;}
        #fail-mask2 .result-btn{width: 4.7rem;height: 1.25rem;}
        #success-mask .result-btn{width: 4.9rem;height: 1.25rem;}
        @keyframes result-open {
            from{transform: scale(.5);}
            to{transform: scale(1);}
        }
        @-webkit-keyframes result-open {
            from{-webkit-transform: scale(.5);}
            to{-webkit-transform: scale(1);}
        }
        .result-open{animation: result-open 300ms linear forwards;-webkit-animation: result-open 300ms linear forwards;}
        #phone-text{color: #ce9c6b;font-size: .24rem;text-align: center;}
        #telephone{background-color: #d68b52;font-size: .38rem;border-radius: 5px;outline: none;border: none;padding: 10px 5px;
            width: 90%; margin-top: 10px;color: #f1dbce;}
        input::-webkit-input-placeholder{color: #f1dbce;}
        #loading{width: 100%;height: 100%;
        background-color: rgba(255, 255, 255, 0.5);}
    </style>
</head>
<body>
<div id="main">
    <div id="loading">
        <img src="img/loading.gif" alt="" width="100%" height="100%"/>
    </div>
    <img src="img/action-back.png" id="back" alt=""/>
    <div id="content">
        <img src="img/banner.png" alt="" id="title"/>
        <img src="img/action-text.png" alt="" id="action-text"/>
        <div id="eggs-wrap">
            <img src="img/floor.png" alt="" id="ground"/>
            <img src="img/say.png" alt="" id="say"/>
            <img src="img/egg-left.png" alt="" id="egg-left"/>
            <img src="img/egg-right.png" alt="" id="egg-right"/>
            <div id="egg1-div">
                <img src="img/egg-middle.png" alt="" id="egg-middle"/>
                <img src="img/egg-floor.png" alt="" id="egg-floor"/>
                <img src="img/eyes1.png" alt="" id="eyes-mouth"/>
            </div>
            <img src="img/hammer.png" alt="" id="hammer" onclick="hammerMove()"/>
            <div id="egg-part">
                <img src="img/egg-after.png" alt="" id="egg-after"/>
                <img src="img/egg-before.png" alt="" id="egg-before"/>
            </div>


        </div>

    </div>
    <div class="mask" id="fail-mask1">
        <img src="img/close.png" alt="" class="close" onclick="hideMask('fail-mask1')"/>
        <!--没抽中-->
        <div class="result-wrap" id="result-fail1">
            <img src="img/fail-title.png" alt="" class="result-title"/>
            <div class="result-content">
                <img src="img/fail-content1.png" alt="" class="result-img"/>
                <a href="#">
                    <img src="img/btn1.png" alt="" class="result-btn"/>
                </a>

            </div>
        </div>
    </div>
    <div class="mask" id="fail-mask2">
        <img src="img/close.png" alt="" class="close" onclick="hideMask('fail-mask2')"/>
        <!--10万元行路宝-->
        <div class="result-wrap" id="result-fail2">
            <img src="img/fail-title2.png" alt="" class="result-title"/>
            <div  class="result-content">
                <img src="img/fail-content2.png" alt="" class="result-img"/>
                <a href="javascript:again();">
                    <img src="img/btn2.png" alt="" class="result-btn"/>
                </a>

            </div>
        </div>
    </div>
    <div class="mask" id="success-mask">
        <img src="img/close.png" alt="" class="close" onclick="hideMask('success-mask')"/>
        <!--尼康相机-->
        <div class="result-wrap" id="result-success">
            <img src="img/fail-title2.png" alt="" class="result-title"/>
            <div  class="result-content">
                <img src="img/success-content1.png" alt="" class="result-img"/>
                <div id="phone-text">快留下您的手机号码，以便联系您寄出奖品哦</div>
                <input type="text" id="telephone" placeholder="输入手机领奖"/>
                <img src="img/success-content2.png" alt="" class="result-img"/>
                <a href="javascript:getPraise();">
                    <img src="img/btn3.png" alt="" class="result-btn"/>
                </a>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript">
    ;(function()
    {
        function resize()
        {
            var docEl = document.documentElement;
            var clientWidth = docEl.clientWidth < 750 ? docEl.clientWidth : 750;
            if (!clientWidth) return;
            docEl.style.fontSize = Math.floor(100 * (clientWidth / 750)) + 'px';
        }

        if('onorientationchange' in window) window.addEventListener('onorientationchange', resize, false);
        window.addEventListener('resize', resize, false);
        document.addEventListener('DOMContentLoaded', resize, false);
    })();
    var eyesTimer;
    document.onreadystatechange = function () {
        if(document.readyState=="complete") {
            getId('loading').className='display-none';
            var i=0;
            eyesTimer=setInterval(function()
            {
                i++;
                getId('eyes-mouth').src='img/eyes'+i+'.png';
                if(i===6)
                {
                    i=0;
                }
            },80);
        }
    }

    function getId(id)
    {
        return document.getElementById(id);
    }
    function hammerMove()
    {
        var hammer=getId('hammer');
        hammer.className='hammerMove';
        setTimeout(function()
        {
            getId('egg-left').className='opacity-0';
            getId('egg-right').className='opacity-0';

            setTimeout(function()
            {
                var eyeAndMouth=getId('eyes-mouth');
                eyeAndMouth.className='opacity-0';
                clearInterval(eyesTimer);
                var say=getId('say');
                say.className='opacity-0';
                setTimeout(function()
                {

                    hammer.className='opacity-0';
                    var egg=getId('egg-middle');
                    egg.className='eggMove';   //金蛋开始摇动

                    setTimeout(function()
                    {
                        //金蛋摇动结束
                        getId('egg1-div').className='display-none';
                        getId('egg-before').className='display-block';
                        setTimeout(function()
                        {
                            getId('egg-before').className='display-none';
                            getId('egg-after').className='display-block';
                            setTimeout(function()
                            {
                                //开奖
                                openResult();
                            },200);


                        },200);
                    },600);
                },300);

            },100);


        },200);


    }

    function  hideMask(ele)
    {
        var mask=getId(ele);
        mask.style.display='none';
    }

    var resultArr=['fail-mask1','fail-mask2','success-mask'];
    //开奖
    function openResult()
    {
        //开奖结果的可能为：['fail-mask1','fail-mask2','success-mask'];
        var result='success-mask';
        getId(result).style.display='block';
        getId(result).getElementsByClassName('result-wrap')[0].className='result-wrap result-open';
        //localStorage.winner='yes';
    }

    //再来一次
    function again()
    {
        //window.location.reload();
        location.href='action.html';
    }

    function getPraise()
    {
        var telephone=getId('telephone').value;
        if(checkIsTelephone(telephone))
        {
            location.href='index.html';
        }
        else
        {
            alert('请输入正确的手机号！');
        }
    }
    function checkIsTelephone(number)
    {
        return /^1[34578]\d{9}$/g.test(number);
    }
</script>
</body>
</html>